<!--
 * @Author: zzr
 * @Date: 2025-01-15 14:46:24
 * @LastEditors: zzr
 * @Description: 
-->
<template>
  <div class="h100 genloading-box flex-v flex-center">
    <div class="wave">
      <i v-if="status == AiImageStatusEnum.IN_PROGRESS" class="iconfont icon-jiazai ft-22"></i>
    </div>
    <i v-if="status == AiImageStatusEnum.FAIL" class="iconfont icon-2guanbi ft-22 t-red"></i>
    <div class="text mt-10 ft-16 pl-10 pr-10">{{ errorMessage || message }}</div>
  </div>
</template>

<script setup>
import { AiImageStatusEnum } from "@/utils/ai/constants";
const { status, errorMessage, message } = defineProps({
  status: {
    type: Number,
    default: AiImageStatusEnum.IN_PROGRESS,
  },
  errorMessage: {
    type: String,
    default: "生成出错！",
  },
  message: {
    type: String,
    default: "生成中，请稍后...",
  },
});
</script>
<style scoped lang="stylus">
@keyframes rotate360 {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
.genloading-box {
  .wave {
    animation: rotate360 2s linear infinite;
  }
  .icon-jiazai {
    color:#5c99ff
  }
  .text{
    color:#6c6784}
}
</style>
